<%@page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta charset="utf-8">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<% if (request.getHeader("USER-AGENT").contains("iPhone") || request.getHeader("USER-AGENT").contains("iPod") || request.getHeader("USER-AGENT").contains("iPad")) { %>
<meta name='viewport' content='target-densitydpi=480,user-scalable=no,maximum-scale=1.0'/>
<% } else { %>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,target-densitydpi=high-dpi,user-scalable=no">
<% } %>
<title>西游斗地主</title>
<link type="text/css" rel="stylesheet" href="css/common_new.css">
<link type="text/css" rel="stylesheet" href="css/create_new.css">
</head>


<body >
	<!--横屏-->
<div class="portrait"><img  src="images/portrait_480.png"   /></div>

<header></header>
<footer></footer>

<!--竖屏  舞台-->
<div id="scene" class="scene">
		<ui id="roleList" class="roleList"></ui>
		
		
		<img  id="bigImg" class="bigImg" src=""  >
		
		<div class="login">
			<span  class="loginName"><img   src="images/xy/myName.png"  ></span>
			<input type="text" class="loginInput" id="name" placeholder="输入角色名" value="" />
			<span class="btn_bg1 btn_create" id="login"  >
				<span><img   src="images/xy/txt_create.png"  ></span>
			</span>
		</div>
		
		
		
		
	
</div>

<script src="js/zepto.min.js"></script>
<script src="js/require.min.js"></script>
<script src="js/quark.base-1.0.0.min.js"></script>
<script src="js/common_new.js"></script>
<script src="js/sessionStorageKey.js"></script>
<script src="js/session.js"></script>
<script src="js/logic.js"></script>
<script>
window.onload=function(){


	
	require(["js/mPage.js","js/mCommon.js"], function(page,common){  
		
		common.setSize();
		page.create();
		
		
		$("#roleList>li").live("click",function(){
			var index = $("#roleList>li").index($(this))
			console.log(index)
			select(index)
		})
		
		setTimeout(function(){
			select(0)
		},500)
	}); 
	
	
	function select(index){
		var roleList = $("#roleList>li")
		var bigImg = $("#bigImg")
		bigImg.attr("src","images/xy/people_"+(index+1)+"/people.png")
		roleList.css("marginLeft","0px")
		roleList.eq(index).css("marginLeft","20px")
		$("#login").attr("roleName",roleList.eq(index).attr("roleName"));
		$("#login").attr("roleId",roleList.eq(index).attr("roleId"));
		
	}
		
  
}
</script>

</body>
</html>